<template>
	<div>
		<div class="bg"></div>
		<div class="seat-selection">
			<div class="seat-row" v-for="row in 5" :key="row">
				<div class="seat-column" v-for="col in 3" :key="col">
					<!-- 使用动态绑定的方式获取图片路径，并设置图片大小 -->
					<img :src="seatImages" :alt="'Seat ' + ((row - 1) * 3 + col)" class="seat-image"
						style="width: 50px; height: 50px;">
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'SeatSelection',
		data() {
			return {
				// 定义座位图片路径
				seatImages: require('@/static/carImages/seat.png')
			};
		}
	}
</script>

<style scoped>
	.bg {
		position: absolute;
		/* 绝对定位，覆盖整个视窗 */
		width: 100%;
		height: 120vh;
		/* 视窗高度，而不是120vh，以避免背景图片超出视窗 */
		margin-top: -20vh;
		/* 移除负外边距 */
		background-image: url('@/static/carImages/bgcar.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		z-index: 100;
		/* 确保背景层在最底层 */
	}

	.seat-selection {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* 设置页面高度为视窗高度，使内容居中显示 */
		position: relative;
		/* 相对定位，确保内容在背景之上 */
		z-index: 1;
		/* 确保座位选择层在背景层之上 */
	}

	.seat-row {
		display: flex;
		justify-content: center;
	}

	.seat-column {
		margin: 1vh;
		/* 可以根据需要调整座位之间的间距 */
	}

	.seat-image {
		/* 可以在这里设置图片的样式 */
	}
</style>